import React, { Component, Fragment } from 'react'
import http from '../../utile/axios'
import { Alert, Card, Comment, Tooltip, List } from 'antd'
import TopicTag from '../../component/TopicTag'
import { UserOutlined } from '@ant-design/icons'
import dayjs from 'dayjs'
require('dayjs/locale/zh-cn')
const relativeTime = require('dayjs/plugin/relativeTime')
dayjs.locale('zh-cn')
dayjs.extend(relativeTime)

export default class Topic extends Component {
  state = {
    listData: {
      tab: 'top',
      author: {}
    },
    loading:true
  }
  // 请求数据
  requestHttp = () => {
    const {
      match: {
        params: { id }
      }
    } = this.props
    this.setState({
      id
    })
    http
      .get(`/topic/${id}`, {
        params: {
          mdrender: true
        }
      })
      .then(data => {
        if (data.status != 200) {
        (  <Alert message='Error Text' type='error' />)
        }

        this.setState({
          listData: data.data.data,
          loading:false
        })
      })
      .catch(err => {
        console.log(err)
      })
  }
  componentDidMount() {
    this.requestHttp()
  }
  render() {
    const { tab, title, replies, visit_count, author, last_reply_at, content } =
      this.state.listData

    return (
      <Card
      loading={this.state.loading}
        title={
          <span>
            <TopicTag tab={tab}></TopicTag>
            <span>{title}</span>
            <ul className='topicLi'>
              <li>发布于{dayjs(last_reply_at).fromNow()}</li>
              <li>作者{author.loginname}</li>
              <li>{visit_count}次浏览</li>
              <li>来自 分享</li>
            </ul>
          </span>
        }
      >
        <div
          className='contentTopic'
          dangerouslySetInnerHTML={{
            __html: content
          }}
        ></div>
        {/*评论列表*/}
        <List
          className='topicLists'
          dataSource={replies}
          renderItem={item => (
            <li>
              <Comment
                author={item.author.loginname}
                avatar={item.author.avatar_url}
                icon={<UserOutlined />}
                datetime={dayjs(item.create_at).fromNow()}
                content={
                  <div
                    className='contentTopic'
                    dangerouslySetInnerHTML={{
                      __html: item.content
                    }}
                  ></div>
                }
              />
            </li>
          )}
        />
      </Card>
    )
  }
}
